<style>
.{{$t|escape:'html'}}_image_button {
  cursor: pointer;
}
table.{{$t|escape:'html'}}_list {
  width: 1200px;
  border-left: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  margin-bottom: 1px;
}
table.{{$t|escape:'html'}}_list td.border {
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
table.{{$t|escape:'html'}}_list th {
  text-align: left;
  height: 35px;
  background-color: #eaf2f5;
  padding: 5px 0 5px 10px; 
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  cursor: pointer;
}
table.{{$t|escape:'html'}}_list th:hover {
  background-color: #99b0ea;
}
table.{{$t|escape:'html'}}_list tr.drop td {
  padding-left: 0;
  border-right: 0;
  border-bottom: 0;
}
table.{{$t|escape:'html'}}_list tr.rowodd td {
  padding-left: 10px;
  height: 35px;
  background-color: #eeeeee;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
table.{{$t|escape:'html'}}_list tr.roweven td {
  padding-left: 10px;
  height: 35px;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
</style>

{{include file='admin/ecommerce/searchbox.tpl'}}
<table id="{{$t|escape:'html'}}_orders" class="{{$t|escape:'html'}}_list" cellPadding="0" cellSpacing="0">
  <tr>
    <td style="height: 35px;padding-left: 10px;"><input id="{{$t|escape:'html'}}_orders_select" type="checkbox"></input></td>
    <td class="border" style="padding-left: 10px;border-bottom: 0;" colSpan=10>
      <table>
        <tr>
          <td><select id="{{$t|escape:'html'}}_orders_actions"><option>{{t escape='html'}}Actions...{{/t}}</option></select></td>
          <td>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <th style="width: 50px;"></th>
    <th style="width: 130px;" onclick="load_orders('order_no')">{{t escape='html'}}Order No.{{/t}}</th>
    <th style="width: 130px;" onclick="load_orders('customer_id')">{{t escape='html'}}Customer{{/t}}</th>
    <th style="width: 100px;" onclick="load_orders('total')">{{t escape='html'}} Total{{/t}}</th>
    <th style="width: 80px;" onclick="load_orders('payment_name')">{{t escape='html'}}Payment{{/t}}</th>
    <th style="width: 80px;" onclick="load_orders('ship_name')">{{t escape='html'}}Shipping{{/t}}</th>
    <th style="width: 80px;" onclick="load_orders('is_paid')">{{t escape='html'}}Paid{{/t}}</th>
    <th style="width: 80px;" onclick="load_orders('is_shipped')">{{t escape='html'}}Shipped{{/t}}</th>
    <th style="width: 130px;" onclick="load_orders('date_last_mod')">{{t escape='html'}}Last Modified{{/t}}</th>
    <th style="width: 130px;" onclick="load_orders('date_added')">{{t escape='html'}}Added Date{{/t}}</th>
    <th style="border-right: 0;"></th>
  </tr>
</table>
<div id="{{$t|escape:'html'}}_orders_pagination" style="margin-top: 15px;"></div>

<script src="jsrequest.php?script={{$t|escape:'html'}}" type="text/javascript"></script>
<script type="text/javascript">
  <!--
    if (document.addEventListener) {
      document.addEventListener('DOMContentLoaded', init, false);
    }
    window.onload = init;
    
    var _result = JSON.parse('{{$result|@json_encode|escape:'javascript'}}');
    var _orders = JSON.parse('{{$result->d|@json_encode|escape:'javascript'}}');
    var _move = null;
    var _y = 0;
    var _selects = [];
    
    function init() {
      if (!document.getElementById || !document.createElement || !arguments || arguments.callee._loaded) {
        return;
      }
      arguments.callee._loaded = true;
      
      update_orders_table();
      
      var select, actions;
      select = document.getElementById('{{$t|escape:'html'}}_orders_select');
      select.onclick = function() {
        for (var idx in  _selects) {
          var obj = _selects[idx];
          obj.checked = this.checked;
        }
      };
      actions = document.getElementById('{{$t|escape:'html'}}_orders_actions');
      actions.options[actions.options.length] = new Option('Delete');
      actions.onchange = function() {
        if (this.selectedIndex == 1) {
          var deletes = [];
          for (var idx in  _selects) {
            var obj = _selects[idx];
            if (obj.checked) {
              deletes[deletes.length] = obj._obj;
            }
          }
          new RequestUtils()._custom('delete_orders', JSON.stringify(deletes), function(result, params) {
            for (var idx in  deletes) {
              var obj = deletes[idx];
              MiscUtils.remove(_orders, obj, null);
            }
            update_orders_table();
            actions.selectedIndex = 0;
          }, {
            php: 'ecommerce/custom.php',
            pos : DOMUtils.findPos(this)
          });
        }
      };
      
      new ModulePagination(document, document.getElementById('{{$t|escape:'html'}}_orders_pagination'), null, null, null, null, {
        page: _result.p,
        total: _result.t,
        limit: _result.s,
        callbackFunc: function(page) { 
          location.href = '?path=ecommerce&t=orders&o=' + _result.o + '&q=' + _result.q + '&p=' + page;
        },
        contenxt: this
      });
    }
    
    //searchbox
    var search_text = document.getElementById('searchbox_search_text');
    var search_button = document.getElementById('searchbox_search_button');
    search_text.onkeyup = function(e) { var code = DOMUtils.getEventCode(e);
                                        if (code == 13) {
                                          location.href = '?path=ecommerce&t=orders&o=' + _result.o + '&q=' + _result.q + '&p=' + _result.p + '&con=' + search_text.value;
                                        }
    };
    search_button.onclick = function(e) {
      location.href = '?path=ecommerce&t=orders&o=' + _result.o + '&q=' + _result.q + '&p=' + _result.p + '&con=' + search_text.value;
    };
    
    function load_orders(o) {
      var q = _result.q;
      if (o == _result.o && _result.q == 'ASC') {
        q = 'DESC';
      } else if (o == _result.o && _result.q == 'DESC') {
        q = 'ASC';
      }
      location.href = '?path=ecommerce&t=orders&o=' + o + '&q=' + q + '&p=' + _result.p; 
    }
    
    function update_orders_table() {
      var table, tr, td, elm, div, p;
      
      table = document.getElementById('{{$t|escape:'html'}}_orders');
      DOMUtils.removeTableRows(table, 2);
      if (_orders.length == 0) {
        tr = table.insertRow(-1);
        tr.className = 'nohover';
        td = tr.insertCell(-1);
        td.className = 'border';
        td.colSpan = 11;
        td.style.padding = '5px 0 5px 10px';
        td.style.height = '35px';
        td.appendChild(document.createTextNode('{{t escape='javascript'}}No Orders Found{{/t}}'));
        
      } else {
        _orders = MiscUtils.sortByOrder(_orders);
        
        for (var idx in _orders) {
          var obj = _orders[idx];
          
          tr = table.insertRow(-1);
          document.body.onmouseup = function(ev) {
            ev = (ev) ? ev : window.event;
            if (!_move) {
              return;
            }
            new RequestUtils()._custom('customer', JSON.stringify(_move), function(result, params) {
              _move = null;
              update_orders_table();
            }, {
              php: 'ecommerce/custom.php',
              pos : [ev.clientX, ev.clientY]
            });
          };
          
          if (_move) {
            tr.style.cursor = 'move';
          }
          
          if (_move && obj.track_id == _move.track_id) {
            tr.className = 'hi';
          } else {
            tr.className = (idx % 2 == 1) ? 'rowodd' : 'roweven';
          }
          
          td = tr.insertCell(-1);
          elm = document.createElement('input');
          elm.type = 'checkbox';
          elm._obj = obj;
          _selects.push(elm);
          td.appendChild(elm);
          
          td = tr.insertCell(-1);
          td.appendChild(document.createTextNode(obj.order_no));
          
          td = tr.insertCell(-1);
          td.appendChild(document.createTextNode(((obj.customerEmail) ? obj.customerEmail : '') + ((obj.customerName && obj.customerName != '') ? ' (' + obj.customerName + ')' : '')));
          
          td = tr.insertCell(-1);
          td.appendChild(document.createTextNode('$' + obj.total));
          
          td = tr.insertCell(-1);
          td.appendChild(document.createTextNode(obj.payment_name));
          
          td = tr.insertCell(-1);
          td.appendChild(document.createTextNode(obj.ship_name));
          
          td = tr.insertCell(-1);
          td.appendChild(document.createTextNode((obj.is_paid == 1) ? 'Yes' : 'No'));
          
          td = tr.insertCell(-1);
          td.appendChild(document.createTextNode((obj.is_shipped == 1) ? 'Yes' : 'No'));
          
          td = tr.insertCell(-1);
          td.appendChild(document.createTextNode(MiscUtils.formatDate(obj.date_last_mod, '{{$lang|escape:'javascript'}}')));
          
          td = tr.insertCell(-1);
          td.appendChild(document.createTextNode(MiscUtils.formatDate(obj.date_added, '{{$lang|escape:'javascript'}}')));
          
          td = tr.insertCell(-1);
          elm = document.createElement('img');
          elm.className = '{{$t|escape:'javascript'}}_image_button';
          elm.src = 'image/edit.png';
          elm._obj = obj;
          elm.onclick = function() {
            location.href = 'admin.php?path=ecommerce&t=order&oti=' + this._obj.track_id;
          }
          td.appendChild(elm);
        }
      }
    }
    
    function update_orders_cell(order, td) {
      if (!_move || order.track_id != _move.track_id) {
        td.style.cursor = 'move';
        td._obj = order;
        td.onmousedown = function(ev) {
          ev = (ev) ? ev : window.event;
          _move = this._obj;
          update_orders_table();
          _y = ev.clientY;
        };
        td.onmouseover = function(ev) {
          ev = (ev) ? ev : window.event;
          if (OOBTUtils.move(_move, this._obj, _orders, (ev.clientY - _y < 0))) {
            _y = ev.clientY;
            update_orders_table();
          }
        };
      }
    }
  -->
</script>
